<template>
	<div id="box">
		<header class="head">
            <div @click="ppp"><router-link tag="i" to="/" class="iconfont icon-left"></router-link></div>
            <div>我的</div>
            <div></div>
        </header>
        <div class="me">
            <dl>
                <dt><img src=""></dt>
                <dd>
                    <h1>登录/注册</h1>
                    <p>登录后享受更多特权</p>
                </dd>
            </dl>
            <div>
                <i class="">></i>
            </div>
        </div>
        <div class="hj">
            <div>
                <p><i class="iconfont icon-icon-copy"></i></p>
                <p>红包</p>
            </div>
            <div>
                <p><i class="iconfont icon-comiisjiahao"></i></p>
                <p>金币</p>
            </div>
        </div>
        <div class="tj">
            <div class="last">
                <p><i class="iconfont icon-dizhi" style="color:rgb(74,765,240);"></i>我的地址</p> <i>></i>
            </div>
            <div class="last">
                <p><i class="iconfont icon-shangcheng" style="color:rgb(148,217,74);"></i>金币商城</p> <i>></i>
            </div>
            <div class="last">
                <p><i class="iconfont icon-liwu" style="color:rgb(252,123,83);"></i>分享拿5元现金</p> <i>></i>
            </div>
            <div class="last">
                <p><i class="iconfont icon-kefu" style="color:rgb(148,217,74);"></i>我的客服</p> <i>></i>
            </div>
            <div class="last">
                <p><i class="iconfont icon-eliaomo" style="color:rgb(60,171,255);"></i>下载饿了么APP</p> <i>></i>
            </div>
        </div>
	</div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
			//事件
			ppp(){
				for(var i=0;i<this.pp.length;i++){
						this.pp[i].style.color = "#9c9c9c";
				}
				this.pp[0].style.color = "#0699ff";
			},
		},
		mounted(){
			//原生js
			this.pp=document.querySelectorAll(".foot>p");
		}
	}
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
#box{
    background: rgb(245,245,245)
}
.head{
    background: rgb(0,143,255);
    color: #fff;
    .px2rem(height,44);
    .px2rem(padding,15);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    font-weight:bold;
    .px2rem(font-size,20); 
    i{
     .px2rem(font-size,20); 
    }
    div:last-child{
		.px2rem(width,20); 
	}
}
.me{
    background: rgb(0,143,255);
    color: #fff;
    .px2rem(height,110);
    .px2rem(padding,15);
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    dl{
        .px2rem(height,60);
        display: flex;
        dt{
            height:100%;
            .px2rem(width,60);
            .px2rem(margin-right,12);
            background: #fff;
            border-radius:50%; 
        }
        dd{
            display: flex;
            flex-direction:column;
            justify-content: center; 
            align-items: center;
            h1{
                .px2rem(font-size,24);
                .px2rem(margin-bottom,8);
                font-weight: bold;
            }
        }
    }
}
.hj{
    display: flex;
    .px2rem(height,83);
    .px2rem(margin-bottom,12);
    border-bottom:1px solid #ccc; 
    .px2rem(border-bottom-width,1);
    div:first-child{
        border-right:1px solid #ccc; 
        .px2rem(border-right-width,1);
    }
    &>div{
        flex: 1;
        display: flex;
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        p{
            .px2rem(margin,3);
        }
        p:first-child{
            .px2rem(line-height,30);
            .px2rem(height,27);
            .px2rem(width,27);
            background: red;
            border-radius:50%;
            text-align:center; 
            i{
                .px2rem(font-size,20);
                color:#fff;
            }
        }
    }
    &>div:last-child{
        p:first-child{
            background: limegreen;
            .px2rem(line-height,27);
        }
    }
}
.tj{
    .last{
        border: 1px solid #ccc;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .px2rem(height,45);
        .px2rem(padding,10);
        box-sizing: border-box;
        p{
            i{
                .px2rem(margin-right,10);
                .px2rem(font-size,15);
                font-weight:bold; 
            }
        }
    }
    .last:first-of-type,.last:nth-of-type(3){
        .px2rem(margin-bottom,12);
    }
}
</style>